<html>
  <head>
    <title></title>
    <style>

    htmlarea {size:*;}
    
    </style>
    <script type="text/tiscript">
    
      const htmlarea = $(htmlarea);
      const plaintext = $(plaintext);
      
      event click $(#b1) { 
        htmlarea.clear();
        htmlarea.$append(<text><br></text>);
        htmlarea.selection.advance(#first);
        htmlarea.state.focus = true;
        return true; 
      }  

      event click $(#b2){ 
        htmlarea.clear();
        htmlarea.$append(<div>Hello Macrocosm</div>);
        htmlarea.selection.advance(#last);
        htmlarea.state.focus = true;
        return true; 
      };  

      event click $(#b3){ 
        var text = plaintext.value;  
        htmlarea.html = text;
        htmlarea.state.focus = true;
        return true; 
      };  

      event click $(#b4){ 
        plaintext.value = htmlarea.html;  
        htmlarea.state.focus = true;
        return true; 
      };  

    
    </script>
  </head>
<body>

<button #b1>Update and go start</button>
<button #b2>Update and go end</button>

<button #b3>set html content</button>
<button #b4>get html content</button>

<htmlarea>
  <p><br></p>
</htmlarea>

<plaintext>
  <p>First</p>
  <p>Second</p>
</plaintext>

</body>
</html>
